<template>
<div>
	
  <div class="shopcart">
  	 <div class="content" @click="toggleList">
  	 	<div class="content-left">
  	 		<div class="logo-wrapper">
  	 			<div class="logo" :class="{'highlight':totalCount > 0}">
  	 				<span class="icon-shopping_cart" :class="{'highlight':totalCount > 0}"></span>
  	 			</div>
  	 			<div class="num" v-show="totalCount > 0">{{totalCount}}</div>
  	 		</div>
  	 		<div class="price" :class="{'highlight':totalPrice > 0}">￥{{totalPrice}}</div>
  	 		<div class="desc">另要配送费￥{{deliveryPrice}}元</div>
  	 	</div>
  	 	<div class="content-right" @click.stop.prevent="pay">
  	 		<div class="pay" :class="payClass">
  	 			{{payDesc}}
  	 		</div>
  	 	</div>	 	
  	 </div>
		<!-- 购物小球（抛物线小球） -->
  	 <div class="ball-container">
        <div v-for="ball in balls">
          	<transition name="drop" 
			          @before-enter="beforeDrop" 
			          @enter="dropping" 
			          @after-enter="afterDrop"
          	>
	            <div v-show="ball.show" class="ball">
	              <div class="inner inner-hook"></div>
	            </div>
          	</transition>
        </div>
      </div>

 	   <!--购物车显示的详情页-->
	<transition name="fold">
        <div class="shopcart-list" v-show="listShow">
          <div class="list-header">
            <h1 class="title">购物车</h1>
            <span class="empty" v-on:click="empty">清空</span>
          </div>
          <div class="list-content" ref="list-content">
            <ul>
              <li class="food" v-for="food in selectFoods">
                <span class="name">{{food.name}}</span>
                <div class="price">
                  <span>￥{{food.price*food.count}}</span>
                </div>
                <div class="cartcontrol-wrapper">
                  <cartcontrol :food="food"></cartcontrol>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </transition>
  </div>

<transition name="fade">
  <div class="list-mask" @click="hideList" v-show="listShow"></div>
</transition>


</div>
</template>

<script>
import BScroll from 'better-scroll'
import cartcontrol from "../cartcontrol/cartcontrol.vue"

export default {
  name: 'shopCart',
  components:{
  	cartcontrol
  },
  props:{
  	selectFoods:{
  		type:Array,
  		default(){
  			//return [{price:10,count:2}]
  			return []
  		}
  	},
    deliveryPrice:{
       type:Number,
       default:0
    },
    minPrice:{
	   type:Number,
	   default:0
    }
  },
  data () {
  	return {
  		balls:[{//5个球
  			show:false
  		},{
  			show:false
  		},{
  			show:false
  		},{
  			show:false
  		},{
  			show:false
  		}],
  		dropBalls:[],
  		fold: true
  	}
  },
  computed:{
  	totalPrice(){
  		let total = 0
  		this.selectFoods.forEach((food) => {
  			total += food.price * food.count
  		})
  		return total
  	},
  	totalCount(){
  		let count = 0
  		this.selectFoods.forEach((food) => {
  			count += food.count
  		})
  		return count
  	},
  	payDesc(){
  		if(this.totalPrice === 0){
  			return `￥${this.minPrice}起送`
  		}else if(this.totalPrice<this.minPrice){
  			let diff = this.minPrice - this.totalPrice
  			return `还差￥${diff}起送`
  		}else{
  			return "去结算"
  		}
  	},
  	payClass(){
  		if(this.totalPrice<this.minPrice){
  			return 'not-enough'
  		}else{
  			return 'enough'
  		}
  	},
  	listShow() {
        if (!this.totalCount) {
          this.fold = true;
          return false;
        }
        let show = !this.fold;
        if (show) {//如果显示详情页
    //数据变化后，DOM并没有立即生效，而BScroll严重依赖于DOM，所以使用nextTick
          this.$nextTick(() => {
            if (!this.scroll) {//如果实例不存在，新建
              this.scroll = new BScroll(this.$refs['list-content'], {
                click: true
              });
            } else {//实例存在，直接调用refresh接口
              this.scroll.refresh();
            }
          });
        }
        return show;
    }

  },
  methods:{
	drop(el) {
	    //触发一次事件就会将所有小球进行遍历
	    for (let i = 0; i < this.balls.length; i++) {
	      let ball = this.balls[i];
	      if (!ball.show) { //将false的小球放到dropBalls
	        ball.show = true;
	        ball.el = el; //设置小球的el属性为一个dom对象
	        this.dropBalls.push(ball);
	        return;//此处return终结函数,这意味着每次触发事件,dropBalls内只增加一个ball
	      }
	    }
	},
   	beforeDrop(el) {
        let count = this.balls.length;
        while (count--) {
          let ball = this.balls[count];
          if (ball.show) {
            let rect = ball.el.getBoundingClientRect();
            let x = rect.left - 32;
            let y = -(window.innerHeight - rect.top - 22);
            el.style.display = '';
            el.style.webkitTransform = `translate3d(0,${y}px,0)`;
            el.style.transform = `translate3d(0,${y}px,0)`;
            let inner = el.getElementsByClassName('inner-hook')[0];
            inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
            inner.style.Transform = `translate3d(${x}px,0,0)`;
          }
        }
    },
    dropping(el, done) {
        /* eslint-disable no-unused-vars */
        let rf = el.offsetHeight;  // 触发重绘
        this.$nextTick(() => {
          el.style.webkitTransform = 'translate3d(0,0,0)';
          el.style.transform = 'translate3d(0,0,0)';
          let inner = el.getElementsByClassName('inner-hook')[0];
          inner.style.webkitTransform = 'translate3d(0,0,0)';
          inner.style.Transform = 'translate3d(0,0,0)';
          el.addEventListener('transitionend', done);
        });
    },
    afterDrop(el) {
        let ball = this.dropBalls.shift();
        if (ball) {
          ball.show = false;
          el.style.display = 'none';
        }
      
    },
    toggleList() {
        if (!this.totalCount) {
          return;//点击无反应
        }
        this.fold = !this.fold;
    },
    empty() {
        this.selectFoods.forEach((food) => {
          food.count = 0;
        });
    },
	hideList() {
		this.fold = true;
	}, 
	pay() {

        if (this.totalPrice < this.minPrice) {
          return
        }
        window.alert(`支付${this.totalPrice}元`)
    }

  }

}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped >
@import '../../common/stylus/mixin.styl'

.shopcart
	position fixed
	z-index:50
	left:0
	bottom:0
	width:100%
	height:48px
	background:#000
	.content
		display flex
		background: #141d27
		font-size 0
		color:rgba(255,255,255,.4)
		.content-left
			flex:1
			.logo-wrapper
				display inline-block
				position relative
				top:-10px
				margin:0 12px
				padding:6px
				width:56px
				height:56px
				box-sizing:border-box
				vertical-align top
				border-radius 50%
				background:#141d27 
				.logo
					width 100%
					height 100%
					border-radius 50%
					background:#2d343c
					text-align center
					&.highlight
						background:rgb(0,160,220)
					.icon-shopping_cart
						line-height 44px
						font-size:24px
						color:#80858a
						&.highlight
							color:#fff
				.num
					position absolute
					top:0
					right:0
					width 24px
					height 16px	
					line-height 16px
					text-align center
					border-radius 16px
					font-size 9px
					font-weight 700
					color #fff
					background:rgb(240, 20, 20)	
					box-shadow 0 4px 8px 0 rgba(0, 0, 0, .4)
			.price
				display:inline-block
				vertical-align:top
				font-size:16px
				line-height:24px
				margin-top:12px
				padding-right:12px
				box-sizing:border-box
				border-right:1px  solid rgba(255,255,255,.2)
				&.highlight
					color:#fff
			.desc
				display inline-block
				vertical-align:top
				line-height 24px
				margin 12px 0 0 12px				
				font-size 10px
		.content-right
			flex:0 0 105px
			width:105px
			.pay
				height:48px
				line-height:48px
				text-align:center
				font-size:12px
				font-weight:700				
				&.not-enough
					background:#2b333b
				&.enough
					background:#00b43c
					color:#fff
	.ball-container
	    .ball
			position fixed
			left 32px
			bottom 22px
			z-index 200
			transition: all 0.6s cubic-bezier(0.49, -0.29, 0.75, 0.41)
			.inner
				width 16px
				height 16px
				border-radius 50%
				background rgb(0, 160, 220)
				transition: all 0.4s linear
	.shopcart-list
		position: absolute
		left: 0
		top: 0
		z-index: -1
		width: 100%
		transform: translate3d(0, -100%, 0)
		&.fold-enter-active, &.fold-leave-active
			transition: all .5s
		&.fold-enter, &.fold-leave-active
			transform: translate3d(0, 0, 0)
		.list-header
			height: 40px
			line-height: 40px
			padding: 0 18px
			background: #f3f5f7
			border-bottom: 1px solid rgba(7, 17, 27, .1)
			.title
				float: left
				font-size: 14px
				color: rgb(7, 17, 27)
			.empty
				float: right
				font-size: 12px
				color: rgb(0, 160, 220)
		.list-content
			padding: 0 18px
			max-height: 217px
			overflow: hidden
			background: #fff
			.food
				position: relative
				padding: 12px 0
				box-sizing: border-box
				border-1px(rgba(7, 17, 27, .1))
				.name
					line-height: 24px
					font-size: 14px
					color: rgb(7, 17, 27)
				.price
					position: absolute
					right: 90px
					bottom: 12px
					line-height: 24px
					font-size: 14px
					font-weight: 700
					color: rgb(240, 20, 20)
				.cartcontrol-wrapper
					position: absolute
					right: 0
					bottom: 6px
.list-mask
	position: fixed
	top: 0
	left: 0
	width: 100%
	height: 100%
	z-index: 40
	backdrop-filter: blur(10px)
	opacity: 1
	background: rgba(7, 17, 27, .8)
	&.fade-enter-active, &.fade-leave-active
		transition: all .5s
	&.fade-enter, &.fade-leave-active
		opacity: 0
		background: rgba(7, 17, 27, 0)			
</style>
